<template>
	<view class="container">
		<uni-popup ref="popupDate" type="bottom">
			<view class="popup-box">
				<view class="title-box">
					<view class="title">可预约时间</view>
					<u-icon name="close" size="26upx" @tap.stop="close()"></u-icon>
				</view>
				<view class="grid-box">
					<view class="item" :class="item.status == 1 ? '' : 'active'" v-for="(item, index) in bookDatetimeList" :key="index" @tap.stop="confirmDate(item)">
						<view class="date" v-if="specification == 4">{{ item.workingDate | formatDate }}全天</view>
						<view class="date" v-else>{{ item.workingDate | formatDate }} {{ item.type == 0 ? '上午' : '下午' }}</view>

						<view class="status" v-if="item.isBooking == 0" style="background-color: #ef8989;">过期</view>
						<view class="status" v-else>{{ item.status == 1 ? '约满' : '可约' }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 时间选择器 -->
		<u-datetime-picker :show="showTime" :minHour="minHour" :maxHour="maxHour" mode="time" @confirm="confirmTime" @cancel="showTime = false"></u-datetime-picker>
	</view>
</template>

<script>
import { escortBookDatetimeList } from '@/apis/request.js';

export default {
	name: 'book-datetime',
	data() {
		return {
			escortId: '',
			serviceId: '',
			bookDatetimeList: [],
			selectDate: {},
			showTime: false,
			minHour: 7,
			maxHour: 17,
			specification: 0 //规格 0次 1半天 2半-白天 3半-夜间 4全天 5月
		};
	},
	filters: {
		formatDate(dateStr) {
			if (dateStr) {
				const weekArr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const date = new Date(dateStr.replace(/-/g, '/'));
				return dateStr.substr(5) + ' ' + weekArr[date.getDay()];
			} else {
				return '**-** **';
			}
		}
	},
	methods: {
		/**
		 * 开启陪诊师可预约时间选择弹窗
		 * @param {String} escortId 陪诊师ID
		 * @param {String} serviceId 服务项目ID【如果没有传不会跳转服务详情界面用于选择陪诊师】
		 */
		open(escortId, serviceId, specification) {
			this.escortId = escortId;
			this.serviceId = serviceId;
			this.specification = specification;
			this.getBookDatetime();
			this.$refs.popupDate.open();
		},
		/**
		 * 关闭弹窗
		 */
		close() {
			this.$refs.popupDate.close();
		},
		/**
		 * 获取陪诊师可预约日期时间
		 */
		getBookDatetime() {
			escortBookDatetimeList({
				escortId: this.escortId
			}).then(res => {
				this.bookDatetimeList = [];
				if (this.specification == 4) {
					for (let i = 0; i < res.length - 1; i++) {
						if (res[i].workingDate == res[i + 1].workingDate && !res[i].status && !res[i + 1].status) {
							let data = {
								mId: res[i].id, //上午id
								aId: res[i + 1].id, //下午id
								workingDate: res[i].workingDate,
								type: 2, //全天
								status: 0 //可约
							};
							this.bookDatetimeList.push(data);
						} else if (res[i].workingDate == res[i + 1].workingDate) {
							let data = {
								mId: res[i].id, //上午id
								aId: res[i + 1].id, //下午id
								workingDate: res[i].workingDate,
								type: 2, //全天
								status: 1 //不可约
							};
							this.bookDatetimeList.push(data);
						}
					}
				} else {
					this.bookDatetimeList = res;
				}
				let nowTime = new Date();
				let demoTime;
				this.bookDatetimeList.forEach(item => {
					demoTime = new Date(item.workingDate).getTime(); //Sun May 07 2023 08:00:00 GMT+0800 (中国标准时间)
					if (item.type == 0) {
						//上午 12:00
						demoTime = demoTime + 4 * 60 * 60 * 1000 - 1;
					} else {
						//下午 24:00
						demoTime = demoTime + 16 * 60 * 60 * 1000 - 1;
					}
					if (demoTime - nowTime > 0) {
						item.isBooking = 1;
					} else {
						item.isBooking = 0;
					}
				});
			});
		},
		/**
		 * 确认预约日期
		 * @param {Object} item
		 */
		confirmDate(item) {
			if (item.isBooking == 0) {
				uni.showToast({
					title: '请选择可预约时间段',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (item.status == 1) {
				uni.showToast({
					title: '已约满请选择其他时间',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			this.selectDate = item;
			//根据选择的日期判断可选的时间范围
			if (item.type == 0) {
				//上午
				this.minHour = 7;
				this.maxHour = 11;
			} else if (item.type == 1) {
				//下午
				this.minHour = 12;
				this.maxHour = 17;
			} else if (item.type == 2) {
				//全天
				this.minHour = 7;
				this.maxHour = 17;
			}
			this.$refs.popupDate.close();
			this.showTime = true;
		},
		/**
		 * 确认预约时间
		 * @param {Object} e
		 */
		confirmTime(e) {
			//对选择的时间进行处理
			this.showTime = false;
			const servieTime = this.selectDate.workingDate + ' ' + e.value + ':00';
			let workingCalendarId;
			if (this.specification == 4) {
				workingCalendarId = this.selectDate.aId + ',' + this.selectDate.mId;
			} else {
				workingCalendarId = this.selectDate.id;
			}
			if (this.serviceId) {
				//有服务项目ID跳转服务详情
				uni.navigateTo({
					url:
						'/pages/servePages/serveDetail?id=' +
						this.serviceId +
						'&escortId=' +
						this.escortId +
						'&workingCalendarId=' +
						workingCalendarId +
						'&treatmentTime=' +
						servieTime
				});
			} else {
				this.$emit('ok', {
					workingCalendarId: workingCalendarId,
					treatmentTime: servieTime
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	.popup-box {
		width: 100%;
		background: white;
		border-radius: 20upx 20upx 0 0;
		padding-bottom: 30rpx;

		.title-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 39upx 30upx 0 30upx;

			.title {
				color: #020202;
				font-size: 34upx;
				font-weight: 500;
			}
		}

		.grid-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 20upx 20upx 30upx 20upx;

			.item {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 331upx;
				height: 50upx;
				line-height: 50upx;
				margin: 10upx;
				font-size: 26upx;
				border: 1upx solid #dcdcdc;
				border-radius: 10upx;

				.date {
					flex: 1;
					text-align: center;
					overflow: hidden;
					color: #999999;
					font-weight: 400;
				}

				.status {
					flex-shrink: 0;
					width: 100upx;
					text-align: center;
					color: white;
					background: #cccccc;
					border-radius: 0 10upx 10upx 0;
				}

				&.active {
					.status {
						background: $uni-color-primary;
					}
				}
			}
		}
	}
}
</style>
